<template>
	<view class="my_income">
		<view class="income_header">
			<view class="item" :class="active==1?'active':''" @click="change(1)">我的销售订单</view>
			<view class="item" :class="active==2?'active':''" @click="change(2)">团队销售订单</view>
		</view>
		<scroll-view scroll-y class="scroll_view" @scrolltolower="loadmore">
			<view class="list">
				<view class="item" v-for="item in _this.list">
					<image src="@/static/test/1.png" class="cover"></image>
					<view class="item_view">
						<view class="name">
							五粮液浓香型白酒第八代普五52度双瓶2宴请送礼礼品含礼品
							五粮液浓香型白酒第八代普五五粮液浓香型白酒第八代普五
						</view>
						<view class="label_view">
							<view class="label">规格：箱</view>
							<view class="label">数量：1</view>
						</view>
						<view class="time">
							<view class="key">时间：</view>
							<view class="value">{{item.created_at}}</view>
						</view>
						<view class="cell_view">
							<view class="cell" v-if="active==2">
								<view class="key">身份名牌：</view>
								<view class="value">{{item.user.level_name}}</view>
							</view>
							<view class="cell" v-if="active==2">
								<view class="key">用户名：</view>
								<view class="value">{{item.user.nickname}}</view>
							</view>
							<view class="cell">
								<view class="key">积分收益：</view>
								<view class="value">{{item.parent_integral}}</view>
							</view>
							<view class="cell">
								<view class="key">现金收益：</view>
								<view class="value">{{item.parent_balance}}元</view>
							</view>
							<view class="cell">
								<view class="key">付款金额：</view>
								<view class="value">{{item.total}}元</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<uv-load-more :status="_this.loadmore_status" line @loadmore="loadmore" />
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		userBouns
	} from "@/request/api";
	import useList from "@/hooks/useList.js";
	const {
		_this
	} = useList();
	import {
		ref
	} from "vue";
	const active = ref(1);
	const getList = async () => {
		let {
			list
		} = await userBouns({
			page: _this.page,
			limit: _this.limit
		});
		_this.last_page = list.last_page;
		list = list.list;
		_this.list = _this.page == 1 ? list : [..._this.list, ...list];
		_this.loadmore_status = _this.last_page == _this.page ? 'nomore' : 'loadmore';
	};
	getList();
	const change = (value) => {
		active.value = value;
		_this.page = 1;
		_this.list = [];
		getList();
	};
	const loadmore = () => {
		if (_this.page >= _this.last_page) return;
		_this.page++;
		getList();
	};
</script>

<style scoped lang="scss">
	.my_income {
		.income_header {
			padding: 40rpx 0 30rpx;
			box-sizing: border-box;
			display: flex;

			.item {
				width: 200rpx;
				height: 60rpx;
				color: #666666;
				font-size: 26rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				border: 2px solid #CCCCCC;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;

				&.active {
					color: #CA1C1D;
					font-size: 26rpx;
					border: 2px solid #CA1C1D;
					box-sizing: border-box;
				}
			}
		}

		.scroll_view {
			height: calc(100vh - var(--window-top) - var(--window-bottom) - #{$navBarHeight} - 250rpx);

			.list {
				.item {
					border-radius: 20rpx;
					margin-bottom: 20rpx;
					padding: 20rpx 44rpx 30rpx 20rpx;
					box-sizing: border-box;
					background: #FFFFFF;
					display: flex;

					.cover {
						width: 160rpx;
						height: 160rpx;
						border-radius: 10rpx;
						background: #EEEEEE;
					}

					.item_view {
						flex: 1;
						padding-left: 30rpx;
						box-sizing: border-box;

						.name {
							line-height: 36rpx;
							color: #333333;
							font-size: 26rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						.label_view {
							margin: 20rpx 0;
							display: flex;

							.label {
								flex: 1;
								color: #666666;
								font-size: 24rpx;
							}
						}

						.time {
							display: flex;

							.key {
								color: #666666;
								font-size: 24rpx;
							}

							.value {
								color: #666666;
								font-size: 24rpx;
								padding-left: 12rpx;
								box-sizing: border-box;
							}
						}

						.cell_view {
							display: flex;
							flex-wrap: wrap;
							justify-content: space-between;

							.cell {
								width: 50%;
								margin-top: 20rpx;
								display: flex;
								overflow: hidden;

								.key {
									color: #666666;
									font-size: 24rpx;
								}

								.value {
									flex: 1;
									color: #CA1C1D;
									font-size: 24rpx;
									white-space: nowrap;
									text-overflow: ellipsis;
									overflow: hidden;
								}
							}
						}
					}
				}
			}
		}
	}
</style>